<template>
  <el-dialog
    width="70%"
    :title="$t('i18n.diaBtns')"
    v-model="dialogButtonsTableVisible"
    :before-close="() => {}"
    :show-close="false"
  >
    <table-componets-vue
      ref="dialogButtonsTable"
      :Sizes="sizes"
      :layout="layout"
      @PageChange="PageChange"
      :currentPage="query.page"
      :pageSize="query.pageSize"
      :loading="tableLoading"
      :isQuery="1 == 1"
      :tables="tables"
      :maxheight="320"
      :Select="
        paramters.fieldKey.selectType == 0 ? 'SingeSelect' : 'MultiSelect'
      "
    ></table-componets-vue>
    <template #footer>
      <span class="dialog-footer">
        <el-button
          :size="'small'"
          type="danger"
          icon="el-icon-back"
          @click="
            dialogButtonsTableVisible = false;
            initList();
          "
          >{{ $t("table.Global_Cancel") }}</el-button
        >
        <el-button
          :size="'small'"
          type="primary"
          icon="el-icon-check"
          @click="confirm"
          >{{ $t("table.Global_Save") }}</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>
<script>
import reqVue from "../utils/req.vue";
import TableComponetsVue from "../components/TableComponets.vue";
import confVue from "../utils/conf.vue";
export default {
  emits: ["confirmEvent"],
  data() {
    return {
      dialogButtonsTableVisible: false,
      tableLoading: false,
      tables: {},
      sizes: confVue.$size,
      layout: confVue.$layout,
      query: {
        page: 0,
        pageSize: 15,
      },
      paramters: {},
    };
  },
  components: { TableComponetsVue },
  methods: {
    InitTable(queryModel) {
      this.tableLoading = true;
      if (queryModel != undefined && queryModel != null) {
        this.query = queryModel;
      } else {
        this.query = {};
        this.query.page = 1;
        this.query.pageSize = 15;
      }
      reqVue.$Post(this.query, "btns/v1.0/pages").then(
        function(data) {
          if (data.status) {
            data.body.operations = [];
            this.tables = data.body;
            this.$nextTick(function() {
              this.$refs.dialogButtonsTable.InitCheckBox(
                this.paramters.data,
                "btnId"
              );
            });
            this.tableLoading = false;
          } else {
            this.$message.error(data.message);
          }
        }.bind(this)
      );
    },
    PageChange(queyModel) {
      this.InitTable(queyModel);
    },
    confirm() {
      let results = this.$refs.dialogButtonsTable.tableResult;
      let pers = [];
      results.forEach((element) => {
        pers.push({ btnId: element.btnId, value: element.value });
      });
      this.initList();
      this.$emit("confirmEvent", {
        key: this.paramters.fieldKey,
        result: pers,
      });
    },
    initList() {
      this.$refs.dialogButtonsTable.dels = [];
      this.$refs.dialogButtonsTable.curs = [];
      this.$refs.dialogButtonsTable.tableResult = [];
    },
  },
};
</script>
